<!--饼图-->
<template>
<!--    <div id="main" style="margin: 10px auto;width: 500px;height: 500px"></div>-->
    <div id="main" style="width:1000px;height:600px;margin: 10px auto;"></div>
</template>
<script>
    import request from "../utils/request";

    const echarts = require('echarts');

    export default {
        name: "PieChart",
        data () {
            return {
                search: '',
                currentPage: 1,
                pageSize: 20,
                total: 0,
                tableData: [],
                seriesData: [],
                legendData: [],
            }
        },
        mounted(){
            this.initChart();
        },
        methods: {
            initChart() {

                var chartDom = document.getElementById('main');

                var myChart = echarts.init(chartDom);
                var option;

                var data = {};
                // console.log(data);
                // console.log(data.selected)

                request.get("/wordCloud",{ // 请求/wordCloud接口
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search
                    }
                }).then(res=>{

                    this.seriesData=[]
                    this.legendData=[]
                    for (var i=0;i<res.data.records.length;i++)
                    {
                        // this.data1[i]=res.data.records[i]['word']
                        // this.data2[i]=res.data.records[i]['frequency']
                        this.legendData.push(res.data.records[i]['word'])
                        this.seriesData.push({"name":res.data.records[i]['word'],'value':res.data.records[i]['frequency']})
                    }

                    option = {
                        title: {
                            text: '专业词汇数量统计',
                            subtext: '数据来自牛客网',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        toolbox: {  // 显示保存图片的按钮
                            show: true,
                            orient: 'horizontal',
                            bottom: 50,
                            right: 50,
                            feature: {
                                // dataView: {readOnly: true},
                                // restore: {},
                                saveAsImage: {}
                            }
                        },
                        legend: {
                            type: 'scroll',
                            orient: 'vertical',
                            right: 10,
                            top: 20,
                            bottom: 20,
                            data: this.legendData,

                            selected: data.selected
                        },
                        series: [
                            {
                                name: '高频词',
                                type: 'pie',
                                radius: '55%',
                                center: ['40%', '50%'],
                                data: this.seriesData,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };

                    // console.log(data.selected)

                    option && myChart.setOption(option);
                })

            },
        }
    }
</script>

<style scoped>

</style>